<template>
    <h1>审核中心</h1>
    <el-tabs v-model="check" class="demo-tabs" @tab-click="handleClick">
        <el-tab-pane label="待审核" name="toCheck">
            <CheckRecord :centerData="toCheckData"/>
        </el-tab-pane>
        <el-tab-pane label="已审核" name="checked">
            <CheckRecord :centerData="checkedData"/>
        </el-tab-pane>
    </el-tabs>
    <button @click="back" class="btn">返回</button>
</template>

<script>
import CheckRecord from '../components/CheckRecord.vue';
import { ref, onMounted } from 'vue';
import _axios from '../axios/index';
import { useRouter } from 'vue-router';
export default {
    components: {
        CheckRecord
    },
    setup() {
        const check = ref('toCheck');
        const toCheckData = ref([]);
        const checkedData = ref([]);
        const router = useRouter();

        async function getToCheckData() {
            let result = await _axios.get("/check/toCheck");
            let r = result.data;
            //alert(JSON.stringify(r.data));
            toCheckData.value = r.data;
        }

        async function getcheckedData() {
            let result = await _axios.get("/check/checked");
            let r = result.data;
            checkedData.value = r.data;
        }

        onMounted(() => {
            getToCheckData();
            getcheckedData();
        });

        function handleClick(tab) {
            if (tab.paneName === 'toCheck') {
                getToCheckData();
            } else if (tab.paneName === 'checked'){
                getcheckedData();
            }
        }

        function back(){
            router.push("/home");
        }

        return {
            check,
            toCheckData,
            checkedData,
            handleClick,
            back
        }
    }
}
</script>

<style scoped>
.btn{
    margin-top: 20px;
    padding: 10px 20px;
    font-size: 16px;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    background-color: #6c757d;
}

.btn:hover{
    background-color: #545b62;
}
</style>